import React from "react";
import { useNavigate } from "zmp-ui";
import backIcon from "../assets/img/home/icon_contract_back.png";

interface NavbarProps {
  title: string;
  onBack?: () => void;
  leftContent?: React.ReactNode;
  rightContent?: React.ReactNode;
  showBackButton?: boolean;
}

const Navbar: React.FC<NavbarProps> = ({
  title,
  onBack,
  leftContent,
  rightContent,
  showBackButton = true
}) => {
  const navigate = useNavigate();

  const handleBack = () => {
    if (onBack) {
      onBack();
    } else {
      navigate(-1);
    }
  };

  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: '0 16px',
      backgroundColor: '#f9f9f9',
      borderBottom: '1px solid #eee',
      height: '44px'
    }}>
      {/* 左侧内容 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        minWidth: '44px',
        justifyContent: 'flex-start'
      }}>
        {leftContent || (showBackButton && (
          <div
            onClick={handleBack}
            style={{
              width: 44,
              height: 44,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              cursor: 'pointer'
            }}
          >
            <img 
              src={backIcon} 
              alt="Back" 
              style={{ 
                width: 44, 
                height: 44,
                filter: 'brightness(0) saturate(100%)'
              }} 
            />
          </div>
        ))}
      </div>

      {/* 中间标题 */}
      <div style={{
        flex: 1,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      }}>
        <h1 style={{
          fontSize: 16,
          fontWeight: 'bold',
          color: '#333',
          margin: 0,
          textAlign: 'center'
        }}>
          {title}
        </h1>
      </div>

      {/* 右侧内容 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        minWidth: '44px',
        justifyContent: 'flex-end'
      }}>
        {rightContent}
      </div>
    </div>
  );
};

export default Navbar;
